<!--
 * @Author: lixinke 530822237@qq.com
 * @Date: 2022-06-17 19:23:33
 * @LastEditors: 方琦
 * @LastEditTime: 2022-06-18 17:25:34
 * @FilePath: \doctor_app_user\src\components\medicalHistory\Completecase.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="Completecase">
    <van-nav-bar title="完整病历" left-text="" left-arrow @click-left="$router.push('/medicalHistory')"/>
    <!--患者信息-->
    <div class="myInformation">
      <div>
        <div class="msg-row1">
          <van-image
              round
              width="3rem"
              height="3rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
          <div class="msg-row1-1">
            <span>{{ patinetMessage.name ? patinetMessage.name : '倒霉熊' }}</span>
            <span>癫痫一期患者</span></div>
        </div>
        <p class="msg-row2"><span>性别:{{ patinetMessage.sex }}</span><span>年龄:{{
            patinetMessage.age
          }}</span></p>
        <p>城市:{{ patinetMessage.address }}</p>
        <p>确诊医院:{{ patinetMessage.hospital }}</p>
        <p>确诊时间:{{ patinetMessage.diagnosis|formatDate }}</p>
      </div>
    </div>
    <!--    信息列表-->
    <van-tabs v-model="active" color="#1989FA" title-active-color="#1989FA">
      <van-tab title="就诊记录">
        <van-cell-group>
          <template v-for="(item,index) in diagnoseOrder">
            <van-cell :title="`第${index+1}次就`"
                      :value="item.dia_time | formatDate"
                      :label="`就诊医生：${item.doc_name}-----${item.hospital_name}`"/>
          </template>
        </van-cell-group>
      </van-tab>
      <van-tab title="现病史">
        <van-tree-select :items="items" :main-active-index.sync="activenav">
          <template #content>
            <!--            诊断-->
            <div v-if="activenav == 0">
              <Diagnosis/>
            </div>
            <!--            辅助检查-->
            <div v-if="activenav == 1">
              <Adjunctive/>
            </div>
            <!--            发作频率-->
            <div v-if="activenav == 2">
              <Frequency/>
            </div>
            <!--            药物治疗-->
            <div v-if="activenav == 3">
              <Drugtherapy/>
            </div>
            <!--            特殊治疗-->
            <div v-if="activenav == 4">
              <Specialtreatment/>
            </div>
          </template>
        </van-tree-select>
      </van-tab>
      <van-tab title="既往病史">
        <Pastmedical/>
      </van-tab>
      <van-tab title="家族病史">
        <Familyhistory/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Diagnosis from './Diagnosis';
import Adjunctive from './Adjunctive';
import Frequency from './Frequency'
import Drugtherapy from './Drugtherapy'
import Specialtreatment from './Specialtreatment'
import Pastmedical from './Pastmedical'
import Familyhistory from './Familyhistory'
import {mapGetters} from "vuex";
import {formatDate} from "@/utils/date";

export default {
  name: "Completecase",
  components: {
    Diagnosis,
    Adjunctive,
    Frequency,
    Drugtherapy,
    Specialtreatment,
    Pastmedical,
    Familyhistory
  },
  computed: {
    ...mapGetters(['userPhone'])
  },

  data() {
    return {
      diagnoseOrder: '',//就诊记录
      patinetMessage: '',//患者信息
      value: '',
      showPicker: false,
      active: '',
      activenav: '0',
      items: [{text: '诊断'}, {text: '辅助检查'}, {text: '发作频率'}, {text: '药物治疗'}, {text: '特殊治疗'}],
    }
  },
  mounted() {
    this.getPatinetMessage();
    this.getDiagnoseOrder();
  },
  methods: {
    //就诊记录
    getDiagnoseOrder() {
      this.$service.medicalHistoryService.getDiagnoseOrder(this.userPhone).then(res => {
        this.diagnoseOrder = res.data.data;
        console.log('就诊记录=' + JSON.stringify(this.diagnoseOrder));
      })
    },
    //根据手机号查询患者信息
    getPatinetMessage() {
      this.$service.medicalHistoryService.getPatinetMessage(this.userPhone).then(res => {
        console.log('患者信息=' + res.data);
        this.patinetMessage = res.data.data;
      })
    },

  },
  filters: {
    //时间戳转换为日期格式
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
}
</script>

<style scoped lang="less">
.Completecase {
  background-color: white;
  //患者基本信息
  .myInformation {

    display: flex;
    font-size: 14px;
    padding: 0.5rem;
    justify-content: space-between;

    .msg-row1 {
      display: flex;

      .msg-row1-1 {
        display: flex;
        flex-direction: column;
        margin-left: 1rem;
        justify-content: center;
      }
    }

    .msg-row2 {
      span {
        margin-right: 0.5rem;
      }
    }
  }

  .Medicallist {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 1.2rem;

    span {
      width: 80px;
      margin-left: 315px;
      color: #1989fa;
    }

    .address {
      margin-top: 0.5rem;
    }
  }
}

</style>
